<template>
  <div class="container" ref="mainCon">
    <!-- <el-row class="titleBox clearfix">
      <span class="blockTitle">定时任务管理</span>
        <el-button type="primary" round class="listAddBtn fr" @click="addQuartzJob" v-show="isShowAdd">添加</el-button>
    </el-row> -->
    <topTitle titleText="定时任务管理"></topTitle>
    <el-button
      type="primary"
      round
      class="listAddBtn fr"
      @click="addQuartzJob"
      v-show="isShowAdd"
      >添加</el-button
    >
    <div class="mainCon">
      <!-- 搜索区域 -->
      <el-row class="searchBox searchInputWidth">
        <el-form :inline="true" :model="filterField" ref="accountForm">
          <el-col :lg="8" :xl="6">
            <el-form-item label="接口名" class="row-padding-bottom">
              <el-input
                placeholder="输入接口名称"
                clearable
                v-model="filterField.name"
                @blur="filterField.name = changeValue($event)"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="接口类型" class="row-padding-bottom">
              <el-select
                v-model="filterField.type"
                placeholder="请选择"
                clearable
                class="selectWidth"
              >
                <el-option label="建筑" value="CS"></el-option>
                <el-option label="非建" value="NC"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-form-item>
            <!-- <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchTable"
              class="commonBtn"
            ></el-button> -->
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchTable"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
          </el-form-item>
          <el-form-item>
            <exportBtn
              :dataLen="tableData.length"
              :filterField="filterField"
              api="api-s/report/export_SYS_QUARTZJOB"
            ></exportBtn>
          </el-form-item>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <!-- 列表 -->
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableData"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          v-loading="loading"
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column
            align="center"
            prop="name"
            label="接口名称"
            :formatter="formatTd"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="codeName"
            label="接口编号"
            :formatter="formatTd"
            width="200"
          ></el-table-column>
          <!-- <el-table-column align="center" prop="description"  label="接口描述" :formatter="formatTd"></el-table-column> -->
          <el-table-column label="接口描述" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.description"
                :columnName="'description'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="cron"
            label="配置时间"
            :formatter="formatTd"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="typeValue"
            label="接口类型"
            :formatter="formatTd"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="path"
            label="接口路径"
            :formatter="formatTd"
            width="330"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="moduleName"
            label="所属模块"
            :formatter="formatTd"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="status"
            label="当前运行状态"
            :formatter="formatTd"
            width="180"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="lastStatus"
            label="上次运行状态"
            :formatter="formatTd"
            width="180"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="lastExecuteTime"
            label="上次运行时间"
            :formatter="formatTd"
            width="180"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="lastCostTime"
            label="上次运行耗时(单位:秒)"
            :formatter="formatTd"
            width="200"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="lastMessage"
            label="上次运行信息"
            :formatter="formatTd"
            width="150"
          ></el-table-column>
          <el-table-column align="left" label="操作" width="210" fixed="right">
            <template slot-scope="scope">
              <el-link
                type="primary"
                @click="updateRow(scope.row.id)"
                v-show="isShowUpdate"
                >修改</el-link
              >
              <el-link
                type="primary"
                @click="deleteRow(scope.row.id)"
                v-show="isShowDel"
                >删除</el-link
              >
              <el-link type="primary" @click="executeRow(scope.row.path)"
                >立即执行</el-link
              >
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <!-- filterField为搜索条件 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
          @getpageSize="getpageSize"
          @getpageNo="getpageNo"
        ></Pagination>
      </div>
    </div>
    <!--添加,修改-->
    <el-dialog
      :title="addOrEdit == 0 ? '定时任务添加' : '定时任务修改'"
      :visible.sync="formVisible"
      :close-on-click-modal="false"
      @close="handleCloseForm"
      custom-class="dialog-minwidth"
      :append-to-body="true"
      :modal-append-to-body="false"
    >
      <el-form
        :model="formData"
        label-width="80px"
        :rules="formRules"
        ref="formData"
        class="form"
      >
        <el-row class="row-padding-bottom">
          <el-col :span="24" class="col-position">
            <el-form-item
              label="接口名称"
              style="row-padding-bottom"
              prop="name"
            >
              <el-input
                type="textarea"
                placeholder="请输入接口名称"
                v-model="formData.name"
                maxlength="200"
                row="6"
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="col-position">
            <el-form-item label="编号" class="row-padding-bottom" prop="code">
              <el-select
                v-model="formData.code"
                placeholder="请选择"
                clearable
                class="selectWidth"
              >
                <el-option
                  v-for="(item, index) of codeData"
                  :key="index"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row-padding-bottom">
          <el-col :span="24" class="col-position">
            <el-form-item
              label="接口描述"
              class="row-padding-bottom"
              prop="description"
            >
              <el-input
                type="textarea"
                placeholder="请输入接口描述"
                v-model="formData.description"
                maxlength="200"
                row="6"
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row-padding-bottom">
          <el-col :span="24" class="col-position">
            <el-form-item
              label="配置时间"
              class="row-padding-bottom"
              prop="cron"
            >
              <el-input
                type="textarea"
                placeholder="请输入定时任务配置时间"
                v-model="formData.cron"
                maxlength="100"
                row="3"
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="col-position">
            <el-form-item label="类型" class="row-padding-bottom" prop="type">
              <el-select
                v-model="formData.type"
                placeholder="请选择"
                clearable
                class="selectWidth"
              >
                <el-option label="建筑" value="CS"></el-option>
                <el-option label="非建" value="NC"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="col-position">
            <el-form-item label="接口路径" prop="path">
              <el-input
                type="textarea"
                placeholder="请输入接口路径"
                v-model="formData.path"
                maxlength="100"
                row="3"
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row-padding-bottom">
          <el-col :span="24" class="col-position">
            <el-form-item label="所属模块" prop="moduleName">
              <el-input
                type="textarea"
                placeholder="请输入模块名"
                v-model="formData.moduleName"
                maxlength="100"
                row="3"
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="handleCloseForm" class="cancel"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click.native="toSave"
          v-show="isShowSave"
          class="save"
          :loading="isRuleLoading"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import scrollTable from '@/mixin/scrollTable.js'

export default {
  name: 'quartzJobManage',
  mixins: [scrollTable],
  data() {
    return {
      requestUrl: 'api-tt/quartzjob/base/list', //表格请求路径
      loading: false,
      isShow: false,
      tableData: [], //表格数据
      filterField: {
        name: '',
        type: '',
      },
      pageSize: 20,
      pageNo: 1,
      pageSizeNumber: 20,
      total: 0,
      pageNo: 1,
      projectId: '',
      addOrEdit: '',
      formVisible: false,
      formData: {
        name: '',
        code: '',
        description: '',
        cron: '',
        type: '',
        path: '',
        moduleName: '',
        status: '',
        lastStatus: '',
        lastExecuteTime: '',
        lastCostTime: '',
        lastMessage: '',
      },
      formRules: {
        name: [
          { required: true, message: '接口名称不能为空', trigger: 'change' },
        ],
        code: [
          { required: true, message: '接口编号不能为空', trigger: 'change' },
        ],
        description: [
          { required: true, message: '接口描述不能为空', trigger: 'change' },
        ],
        cron: [
          {
            required: true,
            message: '接口配置时间不能为空',
            trigger: 'change',
          },
        ],
        type: [{ required: true, message: '类型不能为空', trigger: 'change' }],
        path: [
          { required: true, message: '解扣子路径不能为空', trigger: 'change' },
        ],
        moduleName: [
          { required: true, message: '所属模块不能为空', trigger: 'change' },
        ],
      },
      installUnitList: [],
      isDisabled: false,
      usccDisabled: false,
      isRuleLoading: false,
      id: '',
      codeData: '',
      isShowDel: '',
      isShowUpdate: '',
      isShowAdd: '',
      isShowSave: '',
    }
  },
  created() {
    this.getQuartzCode()
    this.getType()
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
    this.isShowAdd =
      this.$store.state.buttonLimitsArr.indexOf('quartzJobManage:add') > -1
    this.isShowUpdate =
      this.$store.state.buttonLimitsArr.indexOf('quartzJobManage:update') > -1
    this.isShowDel =
      this.$store.state.buttonLimitsArr.indexOf('quartzJobManage:delete') > -1
    this.isShowSave =
      this.$store.state.buttonLimitsArr.indexOf('quartzJobManage:add') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('quartzJobManage:update') > -1
  },
  activated() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
    })
  },
  methods: {
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    // 获取同步接口的标志,唯一性
    getQuartzCode() {
      this.axios({
        method: 'post',
        data: { type: 'QUARTZ_CODE' },
        url: 'api-bs/base/dicitem/findbytype',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.codeData = response.data.result
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    // 获取所有模块
    // 暂时不使用下拉框
    getType() {
      this.axios({
        method: 'post',
        data: { type: 'MODULE_TYPE' },
        url: 'api-bs/base/dicitem/findbytype',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.typeData = response.data.result
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    getTableList(data) {
      this.tableData = data
      this.loading = false
      if (this.tableData.length < 1) {
        this.isShow = true
      }
    },
    //列表查询
    searchTable() {
      this.$refs.pagination.getTableListData()
    },
    // 点击添加
    addQuartzJob() {
      this.addOrEdit = 0
      this.codeData = ''
      this.formData.name = ''
      this.formData.code = ''
      this.formData.description = ''
      this.formData.cron = ''
      this.formData.type = ''
      this.formData.path = ''
      this.formData.moduleName = ''
      this.formVisible = true
      this.getQuartzCode()
      this.$nextTick(function () {
        this.$refs['formData'].resetFields()
      })
    },
    //删除一行
    deleteRow(id) {
      this.axios({
        method: 'post',
        url: 'api-tt/quartzjob/base/delete',
        data: {
          id: id,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.$message({
                message: '删除成功',
                type: 'success',
              })
              this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    //修改一行
    updateRow(id) {
      this.addOrEdit = 1
      this.formVisible = true
      this.isDisabled = true
      this.usccDisabled = true
      this.getUpdateData(id)
    },
    //执行接口
    executeRow(path) {
      this.axios({
        method: 'post',
        url: path,
        type: 'sync',
        data: {},
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
              this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    handleCloseForm() {
      this.formVisible = false
      this.$refs['formData'].resetFields()
    },
    toSave() {
      this.$refs['formData'].validate((valid) => {
        if (valid) {
          this.isRuleLoading = true
          this.QuartzJobData()
        } else {
          return false
        }
      })
    },
    QuartzJobData() {
      var url, data, message
      if (this.addOrEdit == '0') {
        url = 'api-tt/quartzjob/base/add'
        data = {
          name: this.formData.name,
          code: this.formData.code,
          description: this.formData.description,
          cron: this.formData.cron,
          type: this.formData.type,
          path: this.formData.path,
          moduleName: this.formData.moduleName,
        }
        message = '添加成功'
      } else {
        url = 'api-tt/quartzjob/base/edit'
        data = {
          id: this.id,
          name: this.formData.name,
          code: this.formData.code,
          description: this.formData.description,
          cron: this.formData.cron,
          type: this.formData.type,
          path: this.formData.path,
          moduleName: this.formData.moduleName,
        }
        message = '修改成功'
      }
      this.axios({
        method: 'post',
        url: url,
        data: data,
      })
        .then((res) => {
          this.isRuleLoading = false
          if (!res.data.hasError) {
            this.$message({
              message: message,
              type: 'success',
            })
            this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
            this.formVisible = false
          } else {
            this.$message({
              message: res.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch(() => {
          this.isRuleLoading = false
          this.$message.error('添加数据失败')
        })
    },
    // 获取修改详情
    getUpdateData(id) {
      this.id = id
      this.axios({
        method: 'post',
        url: 'api-tt/quartzjob/base/detail',
        data: { id: id },
      })
        .then((res) => {
          if (!res.data.hasError) {
            var allData = res.data.result
            this.formData.name = allData.name
            this.formData.code = allData.code
            this.formData.description = allData.description
            this.formData.cron = allData.cron
            this.formData.type = allData.type
            this.formData.path = allData.path
            this.formData.moduleName = allData.moduleName
            this.$nextTick(() => {
              this.$refs.formData.clearValidate()
            })
          } else {
            this.$message.error('获取详情失败')
          }
        })
        .catch(() => {
          this.$message.error('获取数据失败')
        })
    },
  },
}
</script>

<style scoped lang="less">
@import '../../../static/css/filterArea.less';
.container {
  .selectWidth {
    width: 100%;
  }
  // .titleBox {
  //   border: none;
  //   background: #e4ebf1;
  //   padding: 14px 24px;
  //   margin-bottom: 0px;
  //   .listAddBtn {
  //     width: 136px;
  //     background: #009588;
  //     border: none;
  //   }
  //   .listAddBtn:hover{
  //     background: #009588;
  //     border-color:#009588;
  //     opacity: 0.8;
  //   }
  //   .blockTitle {
  //     font-weight: bold;
  //     font-size: 18px;
  //     color: #333;
  //     line-height: 40px;
  //   }
  // }
  .listAddBtn {
    width: 136px;
    background: #009588;
    border: none;
    position: absolute;
    right: 24px;
    top: 7px;
    height: 36px;
  }
  .listAddBtn:hover {
    background: #009588;
    border-color: #009588;
    opacity: 0.8;
  }
}
</style>
